<template>
  <div class="main settle-payment-detail-container">
    <div class="title">
      结算详情
    </div>
    <div v-if="baseInfo.auditStatus == 8" class="reason">驳回原因:{{ baseInfo.auditRemark }}</div>
    <el-form :label-position="labelPosition" label-width="80px" :model="formData" ref="formData">
      <el-form-item label="申请商家：" prop="companyName" label-width="150px">
        {{ baseInfo.merchantName }}
      </el-form-item>
      <el-form-item label="开户行：" prop="socialCreditCode" label-width="150px">
        {{ baseInfo.bankName }}
      </el-form-item>
      <el-form-item label="开户行名称：" prop="detailAddress" label-width="150px">
        {{ baseInfo.branchName }}
      </el-form-item>
      <el-form-item label="开户行账号：" prop="contact" label-width="150px">
        {{ baseInfo.bankAccount }}
      </el-form-item>
      <el-form-item label="结算金额：" prop="position" label-width="150px">
        {{ baseInfo.settleAmount }}
      </el-form-item>
      <el-form-item label="结算方式：" prop="email" label-width="150px">
        {{ baseInfo.settleType == 'DZ_BANK' ? '电子银行' : '其他' }}
      </el-form-item>
      <el-form-item label="发票号码：" prop="invoiceNumber" label-width="150px">
        <el-input :disabled="disabled" v-model="formData.invoiceNumber"></el-input>
      </el-form-item>
      <el-form-item label="上传附件：" prop="attachment" label-width="150px">
        <el-upload
          :disabled="disabled"
          class="upload"
          action="https://static-uat.bisinuolan.cn/bsnl-oss/upload"
          :file-list="attachmentFiles"
          :on-preview="previewFile"
          :multiple="true"
          :limit="3"
        >
          <el-button size="small" type="primary">上传文件</el-button>
          <div slot="tip" class="el-upload__tip">加盖公司公章，支持pdf、png、jpg格式文件，大小需小于5M</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="附件单据数：" prop="attachNumber" label-width="150px">
        <el-input :disabled="disabled" type="number" v-model="formData.attachNumber"></el-input>
      </el-form-item>
      <el-form-item label="结算说明：" prop="remarks" label-width="150px">
        <el-input :disabled="disabled" type="textarea" :autosize="{ minRows: 5, maxRows: 5 }" v-model="formData.remarks"></el-input>
      </el-form-item>
      <el-form-item label-width="150px">
        <el-button class="next-btn" plain type="info" @click="backDetail">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { paymentBase } from '@/api/merchantsys/settle'
export default {
  name: 'paymentApply',
  metaInfo() {
    return {
      titleTemplate: '入驻 - %s'
    }
  },
  computed: {
    showJoinPerson() {
      return this.formData.haveJoin
    }
  },
  data() {
    return {
      attachmentFiles: [],
      disabled: true,
      loading: false,
      labelPosition: 'right',
      formData: {
        accountId: null,
        attachNumber: null,
        attachment: null,
        invoiceNumber: null,
        merchantId: null,
        remarks: null,
        settleNo: null
      },
      baseInfo: {}
    }
  },
  created() {
    //加载详情
    this.fetchBaseInfo()
  },
  methods: {
    previewFile(file) {
      window.open(file.url)
    },
    //详情
    fetchBaseInfo() {
      console.log(this.$router.params)
      const accountId = this.$route.params.accountId
      const settleNo = this.$route.params.settleNo
      paymentBase({ account_id: accountId, settle_no: settleNo }).then(res=>{
        this.baseInfo = res.data
        this.formData.invoiceNumber = res.data.invoiceNumber
        this.formData.attachment = res.data.attachment
        this.formData.attachNumber = res.data.attachNumber
        this.formData.remarks = res.data.remarks
        if (res.data.attachment) {
          res.data.attachment.split(';').forEach((elment, index) => {
            this.attachmentFiles.push({ name: '附件' + ++index, url: elment })
          })
        }
      })
      this.formData.settleNo = settleNo
      this.formData.accountId = accountId
    },
    //返回
    backDetail() {
      this.$router.push({ path: '/settle/payment/list' })
    }
  }
}
</script>

<style lang="scss" scoped>

.settle-payment-detail-container{
    .title{
      font-size: 18px;
      color: black;
      font-weight: bold;
      line-height: 38px;
      padding-left: 20px;
    }
    .el-form-item{
      .next-btn{
        width: 100px;
      }
      .el-input{
        width: 420px;
      }
    }
    .reason{
      padding-left: 20px;
      color:red
    }
}

</style>